<template>
  <div id="boardDetail">
    <el-row :gutter="0"  justify="center">
      <el-col :sm="18" :lg="9" :xs="24">
        <nut-navbar @on-click-back="back" @on-click-title="title" title="T型报价"  class="navbar" >
          <template #left>
            <div>返回</div>
          </template>
          <template #right>
            <nut-icon class="right" name="share-n"></nut-icon>
          </template>
        </nut-navbar>
        <div>
          <el-row  justify="space-around">
            <el-col class="topdiv" :sm="6" :lg="6" :xs="8" justify="center"  >
                <div>
                挂钩标的
                <div is-link class="select-box" extra="请选择"  @click="!showPopup">{{form.data.iName}}</div>
                <van-popup v-model:show="show" position="bottom" :style="{ height: '30%' }">
                  <van-picker
                      title="标题"
                      :columns="columns"
                      @confirm="onConfirm"
                      @cancel="onCancel"
                      @change="onChange"
                    />
                </van-popup>

              </div>
            </el-col>
            <el-col class="topdiv" :sm="6" :lg="6" :xs="8" justify="center"  >
              <div>
                <p>欧式期权</p>
                <p>标的价格</p>
              </div>
            </el-col>
            <el-col class="topdiv" :sm="6" :lg="6" :xs="8" justify="center"  >
              <div>
                <label>到期日</label>
                <el-date-picker value-format="YYYY-MM-DD" v-model="form.data.terminationDate"></el-date-picker>
              </div>
            </el-col>
          </el-row>

          <el-row class="bottomDiv" justify="space-around">
            <el-col :sm="10" :lg="10" :xs="9" justify="center"  >
              <div style="background-color: red">看涨</div>
            </el-col>
            <el-col :sm="4" :lg="4" :xs="6" justify="center"  >{{form.data.spotPrice}}</el-col>
            <el-col :sm="10" :lg="10" :xs="9" justify="center"  >
              <div style="background-color: green">看跌</div>
            </el-col>
          </el-row>
          <div class="board">
            <nut-table   :columns="getColumns()" :data="state.data" :bordered="false"  :striped="true"></nut-table>
          </div>
        </div>
      </el-col>
    </el-row>


  </div>
</template>
<script setup>
import { Button, Icon ,Navbar,Tabs, TabPane,Table  } from '@nutui/nutui';
import {getBoardDetailList} from "../../api/board/template";
import {onMounted,onBeforeMount} from "vue";
const {proxy} = getCurrentInstance()
const state = reactive({
  columns: [
    /*Call*/
    {
      title: '买价',
      key: 'cbp',
      align: 'center',
      sorter: ()=>{setShow()},
    },

    {
      title: '卖价',
      key: 'csp',
      align: 'center',
      sorter: ()=>{setShow()},
      style: {
        color: 'red'
      }
    },
    {
      title: '买价%',
      key: 'cbpp',
      align: 'center',
      hide : true,
      sorter: ()=>{setShow()},
    },
    {
      title: '卖价%',
      key: 'cspp',
      align: 'center',
      style: {
        color: 'red'
      },
      sorter: ()=>{setShow()},
      hide : true
    },
    {
      title: '买价vol',
      key: 'cbv',
      align: 'center',
      hide : true,
      sorter: ()=>{setShow()},
    },
    {
      title: '卖价vol',
      key: 'csv',
      align: 'center',
      style: {
        color: 'red'
      },
      sorter: ()=>{setShow()},
      hide : true
    },
    {
      title: '行权价',
      key: 'strike',
      align: 'center',
      sorter: ()=>{setShow()},
    },
      /*Put*/
    {
      title: '买价',
      key: 'pbp',
      align: 'center',
      sorter: ()=>{setShow()},
    },
    {
      title: '卖价',
      key: 'psp',
      align: 'center',
      sorter: ()=>{setShow()},
      style: {
        color: 'red'
      }
    },
    {
      title: '买价%',
      key: 'pbpp',
      align: 'center',
      sorter: ()=>{setShow()},
      hide : true
    },
    {
      title: '卖价%',
      key: 'pspp',
      align: 'center',
      sorter: ()=>{setShow()},
      style: {
        color: 'red'
      },
      hide : true
    },
    {
      title: '买价vol',
      key: 'pbv',
      align: 'center',
      sorter: ()=>{setShow()},
      hide : true
    },
    {
      title: '卖价vol',
      key: 'psv',
      align: 'center',
      sorter: ()=>{setShow()},
      style: {
        color: 'red'
      },
      hide : true
    }
  ],
  data: [

  ],
  index:0
});
const form = reactive({
  data:{
    terminationDate:'',
    spotPrice: '',
    dpClose: "",
    centerIndex:5,
    iName: 'xxx'

  }
})
const getColumns = ()=>{
  return state.columns.filter(item => !Boolean(item.hide) )
}
 const columns = ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华'];

    const onConfirm = (value, index) => {
      show.value = false;
      form.data.iName = value
      Toast(`当前值: ${value}, 当前索引: ${index}`);
    };
    const onChange = (value, index) => {
      Toast(`当前值: ${value}, 当前索引: ${index}`);
    };
    const onCancel = () => {
      show.value = false;
    };


const setShow = ()=>{
  state.index ++
  let indexStr =  state.index%3
  switch (indexStr){
    case 0 :{setStateColumn(['行权价','买价','卖价'])};break;
    case 1 :{setStateColumn(['行权价','买价vol','卖价vol'])};break;
    case 2 :{setStateColumn(['行权价','买价%','卖价%'])};break;
  }
}
const setStateColumn=(indexArr)=>{
  state.columns.forEach(item=> {
    item["hide"]= !indexArr.includes(item.title)
  })
}
const back = ()=>{
  window.location.href = "/board"
}
const refer = () => {
  let {begDate,instrumentId,iName,tmpId} = proxy.$route.query
  form.data.terminationDate = begDate
  form.data.iName = iName
  getBoardDetailList(begDate,instrumentId,tmpId).then( response=>{
    form.data.spotPrice = response[0].spotPrice
    form.data.dpClose = new Number(new Number(response[0].dpClose).toFixed(2)).toLocaleString()
    state.data.length = 0
    response.sort((a,b)=>{return a.strikePercentage - b.strikePercentage}).forEach(item=>{
      state.data.push({
        cbp:  ()=>h('div', {
          style: {
            color: 'green'
          }
        }, Number(new Number(item.callbuyNpv).toLocaleString()).toFixed(2)),
        cbv:  ()=>h('div', {
          style: {
            color: 'green'
          }
        }, Number(item.callbuyVol*100).toFixed(2)+'%'),
        cbpp:  ()=>h('div', {
          style: {
            color: 'green'
          }
        }, new Number(Math.abs(Number(item.callbuyNpvPercent*100).toFixed(2))).toLocaleString()+'%'),
        csp: ()=>h('div', {
          style: {
            color: 'red'
          }
        }, Math.abs(Number(new Number(item.callshellNpv).toLocaleString())).toFixed(2)),
        csv:  ()=>h('div', {
          style: {
            color: 'green'
          }
        }, new Number(Number(item.callShellVol*100).toFixed(2)).toLocaleString()+'%'),
        cspp: ()=>h('div', {
          style: {
            color: 'red'
          }
        }, new Number(Math.abs(Number(item.callShellNpvPercent*100).toFixed(2))).toLocaleString()+'%'),
        strike:Number(item.spotPrice*item.strikePercentage).toFixed(2),
        pbp:  ()=>h('div', {
          style: {
            color: 'green'
          }
        }, Math.abs(Number(new Number(item.putbuyNpv).toLocaleString())).toFixed(2)),
        pbpp:  ()=>h('div', {
          style: {
            color: 'green'
          }
        }, new Number(Math.abs(Number(item.putbuyNpvPercent*100).toFixed(2))).toLocaleString()+'%'),
        psp: ()=>h('div', {
          style: {
            color: 'red'
          }
        }, Math.abs(Number(new Number(item.putshellNpv).toLocaleString())).toFixed(2)),
        pbv:  ()=>h('div', {
          style: {
            color: 'green'
          }
        }, Number(item.putbuyVol*100).toFixed(2)+'%'),
        psv:  ()=>h('div', {
          style: {
            color: 'green'
          }
        }, Number(item.putShellVol*100).toFixed(2)+'%'),
        pspp:  ()=>h('div', {
          style: {
            color: 'green'
          }
        }, new Number(Math.abs(Number(item.putShellNpvPercent*100).toFixed(2))).toLocaleString()+'%'),
      });
    })
  })
}
//定义 timer 初始值及类型
let timer = null
onMounted(() => {
  refer()
  timer = setInterval(() => {
    refer()
  }, 2000)
})

onBeforeMount(() => {
  // 清理定时器要处理 timer 的类型
  clearInterval(Number(timer))
})
 const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };
</script>
<style scoped >

/deep/ .nut-table__main--striped .nut-table__main__head__tr {
  background-color: #333;
  padding: 5px 0;
}


.table-title-item {
  text-align: center;
  font-size: 14px;
}

/deep/ .nut-table__main__body__tr .nut-table__main__body__tr__td {
  background-color: #111;
}

/deep/ .nut-table__main__body__tr .nut-table__main__body__tr__td:nth-child(5)  {
  background-color: #111 ;
}
/deep/ .nut-table__main__body__tr:nth-child(n) .nut-table__main__body__tr__td:nth-child(3)  {
  background-color: #333 !important;
}

/*报价版本样式*/
.nut-table {
  display: flex;
  width: 100%;
  flex-direction: column;
  font-size: 16px;
}
/deep/ .nutui-iconfont {
  display: none;
}
/deep/ .nut-table__main__head__tr__th {
  width: 20%;
}

/deep/ .p-column-header-content{
  justify-content: center;
}

#boardDetail {
  font-size: 14px !important;
  background: #111 !important;
  height: inherit;
  color: #FFFFFF;
}
.columnHeader{
  width: 16%;
  background: #333;
}
.navbar{
  margin-bottom:2px;
}
.bottom {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: center;
  align-items: center;
  background: #000;
}
.topdiv {
  text-align: center;
  align-self: center;
  width: 33%;
  padding: 10px 0;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-direction: column;
  flex-direction: column;
}
.bottomDiv{
  line-height: 36px;
  text-align: center;
}
.select-box{
      -webkit-text-size-adjust: 100%;
    --antd-wave-shadow-color: #1890ff;
    font-feature-settings: "tnum";
    color: #ddd;
    width: "60%";
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    box-sizing: border-box;
    margin: 0;
    border: 0;
    font: inherit;
    vertical-align: middle;
    text-align: center;
    position: relative;
    background: #555;
    border-radius: 3px;
    padding-right: 15px!important;
    padding: 5px 10px;
    margin-top: 10px;
}
/deep/ .nut-navbar__title .title {
  min-width: 100px;
  font-size: 14px;
  font-weight: 0;
  color: #FFFFFF !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
/deep/ .nut-navbar{
  position: relative;
  display: flex;
  align-items: center;
  height: 44px;
  box-sizing: border-box;
  /*padding: 13px 16px;*/
   background: #333;
   box-shadow: none;
  font-size: 14px;
  color: #FFFFFF !important;;
  margin-bottom: 0px;
  overflow: hidden;
}
</style>